<template>
    <div>
        <el-dialog title="资产入库详情" :visible.sync="visible" :before-close="conmel" width="1300px">
            <div class="botcenten">
                <div style="width: 900px;">
                    <el-form label-position='right' :inline="true" class="demo-form-inline">
                        <el-form-item label="入库主题:" label-width="90px">
                            <el-input readonly v-model="form.storageName"></el-input>
                        </el-form-item>
                        <el-form-item label="入库时间:" label-width="90px">
                            <el-input readonly v-model="form.storageTime"></el-input>
                        </el-form-item>
                        <el-form-item label="入库备注:" label-width="90px">
                            <el-input readonly v-model="form.remark" type="textarea"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider></el-divider>

                <div class="slectheader">
                    <span class="title-name">资产名称 :</span>
                    <el-input class="handle-input" clearable placeholder="请输入内容" v-model="valueName"></el-input>
                    <el-button type="primary" icon="el-icon-search" style="margin-left: 10px;"
                        @click="seled">查询</el-button>
                    <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
                    <!-- <el-button type="success" icon="el-icon-upload2">导出</el-button> -->
                </div>
                <div>
                    <el-table :data="tableData" border class="table" ref="multipleTable"
                        header-cell-class-name="table-header">
                        <el-table-column type="index" label="序号" width="60" align='center'>
                            <template slot-scope="scope">
                                {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="assetsSerial" label="资产编码" align='center'></el-table-column>
                        <el-table-column prop="equipName" label="资产名称" align='center'></el-table-column>
                        <el-table-column prop="standard" label="规格型号" align='center'></el-table-column>
                        <el-table-column prop="equCategory" label="资产分类" align='center'></el-table-column>
                        <el-table-column prop="equParentCategory" label="资产大类" align='center'></el-table-column>
                        <el-table-column prop="equipPrice" label="资产价格" align='center'></el-table-column>
                        <el-table-column prop="equipNum" label="资产数量" align='center'></el-table-column>
                        <el-table-column label="业务状态" align='center'>
                            <template slot-scope="scope">
                                <span v-if="scope.row.equipState == 1"
                                    style="background-color: rgba(0, 102, 255, 0.2); color:rgb(0, 102, 255) ;  display: inline-block; padding: 3px 10px;">闲置中</span>
                                <span v-else-if="scope.row.equipState == 2"
                                    style="background-color: rgba(212, 174, 5, 0.2); color:rgb(212, 174, 5) ;   display: inline-block; padding: 3px 10px;">报修中</span>
                                <span v-else-if="scope.row.equipState == 3"
                                    style="background-color: rgba(212, 71, 5, 0.1); color: rgb(212, 71, 5);  display: inline-block; padding: 3px 10px;">已报废</span>
                                <span v-else-if="scope.row.equipState == 4"
                                    style="background-color: rgba(5, 212, 57, 0.1);  color: rgb(5, 212, 57); display: inline-block; padding: 3px 10px;">使用中</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="useDept" label="使用部门" align='center'></el-table-column>
                        <el-table-column prop="personCharge" label="使用人" align='center'></el-table-column>
                        <el-table-column prop="storagePlace" label="存放地点" align='center'></el-table-column>
                        <el-table-column prop="gainType" label="取得方式" align='center'></el-table-column>

                        <el-table-column label="操作" width="80" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" class="mr10" @click="more(scope.row.equipSerial)">更多</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                            :page-size="query.pageSize" :total="pageTotal"
                            @current-change="handlePageChange"></el-pagination>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="conmel">确 定</el-button>
            </div>
        </el-dialog>
        <listdetail ref="listdetail" :disable="disable" @close="disable = false"></listdetail>
    </div>

</template>

<script>
import listdetail from '../components/assetlist_detail.vue'
import { storelistDetail } from '../../../../api/index'
export default {
    name: "in-detail",
    props: {
        visible: {
            type: Boolean,
            required: true
        }
    },
    watch: {

    },
    components: {
        listdetail
    },
    data() {
        return {
            disable: false,
            query: {
                equName: "",
                storeId: '',
                pageNum: 1,
                pageSize: 5,
            },
            pageTotal: 0,
            valueName: "",
            tableData: [],
            form: {}
        }
    },
    mounted() {

    },
    methods: {
        more(e) {
            this.disable = true
            this.$refs.listdetail.open(e)
        },
        open(e) {
            this.query.storeId = e.id
            this.form = { ...e }
            // console.log(e);

            this.detaillist()
        },
        async detaillist() {
            const data = await storelistDetail(this.query)
            this.tableData = data.data.data.records
            this.pageTotal = data.data.data.total
        },
        conmel() {
            this.valueName = ''
            this.query.equName = ''
            this.query.pageNum = 1
            this.$emit('close')
        },
        handlePageChange(e) {
            this.query.pageNum = e
            this.detaillist()

        },
        // 重置
        reset() {
            this.valueName = ''
            this.query.equName = ''
            this.query.pageNum = 1
            this.detaillist()
        },
        //查询
        seled() {
            this.query.equName = this.valueName
            this.query.pageNum = 1
            this.detaillist()
        },
    }

}
</script>


<style lang="less" scoped>
::v-deep .el-input {
    width: 200px;
}

::v-deep .el-input.is-disabled .el-input__inner {
    background-color: #fff;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff;

}

::v-deep .el-textarea {
    width: 500px;

}

.slectheader {
    height: 60px;
}

.botcenten {
    padding: 10px;
    background-color: #e9e9e962;

}
</style>